<!-- 素材管理 -->
<template>
  <div class="matter-main">
    <el-card>
      <div slot="header">
        <el-row>
          <el-col :span="12">
            <span>素材管理</span>
          </el-col>
          <el-col :span="12" style="text-align:right">
            <el-upload
              ref="upload"
              class="upload-demo"
              action="/api/leju/admin/material/uploadAndSaveImg"
              :on-success="handlesucc"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <span
                slot="tip"
                class="el-upload__tip"
                style="padding-left:10px"
              >只能上传jpg/png文件，且不超过500kb</span>
            </el-upload>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="6" v-for="item in materialList" :key="item.id">
          <el-card :body-style="{ padding: '0px' }" shadow="never">
            <div slot="header">
              <span style="color:red;" @click="doDel(item.id)">删除</span>
            </div>
            <el-image
              style="width:80%;height: 300px;margin-left:10%;padding:10px 0"
              :src="item.ossUrl"
            ></el-image>
          </el-card>
        </el-col>
      </el-row>
      <el-pagination
        style="float:right;padding-bottom:15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalcount"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import matterApi from "@/api/matter/index";
export default {
  name: "matterContent",
  data() {
    return {
      materialList: [],
      page: {
        start: 1,
        limit: 12,
        sizes: [12, 24, 36],
        totalcount: 0,
      },
    };
  },
  created() {
    this.getMatterList();
  },
  methods: {
    //获取素材列表
    getMatterList() {
      var params = {
        start: this.page.start,
        limit: this.page.limit,
      };
      matterApi.materialList(params).then((res) => {
        this.materialList = res.data.list;
        this.page.totalcount = res.data.totalRow;
      });
    },

    //上传图片成功
    handlesucc(response) {
      this.$refs.upload.clearFiles();
    },

    //删除图片
    doDel(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          matterApi.materialDel({ id }).then((res) => {
            var index = this.materialList.findIndex((item) => {
              return item.id == id;
            });
            this.materialList.splice(index, 1);
            this.getMatterList();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleSizeChange(val) {
      this.page.limit = val;
      this.getMatterList();
    },

    handleCurrentChange(val) {
      this.page.start = val;
      this.getMatterList();
    },
  },
};
</script>
<style lang='scss' scoped>
.matter-main {
  .el-card {
    margin: 30px;
  }
}
</style>